<script lang="ts" setup>
import { navyMenu } from '@/index';
import type { Menu } from '@/types';
import type { ElTree } from 'element-plus';

const currentMenu = defineModel('currentMenu', { type: Object, required: true });

const menuTreeRef = ref<InstanceType<typeof ElTree>>();

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.title.includes(value);
};

const searchKeyword = ref<string>();

watch(searchKeyword, val => {
  menuTreeRef.value!.filter(val);
});
const defaultExpandedKeys = computed<string[]>(() => Array.of(currentMenu.value.fullPath));
const handleCurrentChange = (data: Menu, _node: Node) => {
  currentMenu.value.type = data.type;
  currentMenu.value.path = data.path;
  currentMenu.value.name = data.name;
  currentMenu.value.title = data.title;
  currentMenu.value.fullPath = data.fullPath;
  currentMenu.value.isShow = data.isShow;
};
</script>
<template>
  <el-input v-model="searchKeyword" placeholder="请输入菜单关键字" class="searh-input" clearable />
  <el-tree
    ref="menuTreeRef"
    :data="navyMenu"
    :filter-node-method="filterNode"
    :default-expanded-keys="defaultExpandedKeys"
    node-key="fullPath"
    highlight-current
    :current-node-key="currentMenu.fullPath"
    @current-change="handleCurrentChange"
  >
    <template #default="{ data }"> {{ data.title }}</template>
  </el-tree>
</template>
<style lang="scss" scoped>
.searh-input {
  margin-bottom: 5px;
}
</style>
